<!--温世杰 文章  -->
<template>
  <div id="sysArticle">
    <div>
      <el-card style="margin-bottom: 6px">
        <el-input
          style="width: 300px"
          placeholder="请输入文章标题"
          v-model="queryArticle.articleTitle"
          clearable
        >
        </el-input
        >&nbsp;&nbsp;
        <el-button
          class="custom-button"
          icon="el-icon-search"
          v-on:click="getArticle()"
          >查询</el-button
        >
        <el-button
        style="margin-left: 30px"
        class="custom-buttonT"
        icon="el-icon-plus"
        functionCode="user:add"
        @click="openAddWindow">添加</el-button
      >
      </el-card>

      <!--====================================================================================================================== -->
      <el-card>
        <!-- 全查列表 -->
        <el-table
          v-loading="loading"
          :data="articleData"
          border
          stripe
          header-cell-class-name="headerBg"
          height="600"
        >
          <el-table-column
            fixed
            prop="userName"
            label="医师名称"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="articleTitle"
            label="文章标题"
            width="180px"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="imageId"z
            label="文章图片"
            width="100"
            align="center"
          >
          <template slot-scope="scope">
            <el-carousel height="70px" v-if="scope.row.images" width="100">
              <el-carousel-item
                v-for="item in scope.row.images.split(',')"
                :key="item"
              >
                <img height="70" width="70" :src="$imageUrl + item" />
              </el-carousel-item>
            </el-carousel>
            <el-tag v-else type="info">暂无数据</el-tag>
          </template>
          </el-table-column>
          <el-table-column
            prop="video"
            label="文章视频"
            width="100"
            align="center"
          >
          <template slot-scope="scope">
          <el-carousel height="70px" v-if="scope.row.video" width="100">
              <el-carousel-item
                v-for="item in scope.row.video.split(',')"
                :key="item"
              >
                <video
                  height="70"
                  width="70"
                  :src="
                  'http://101.43.223.224:8765/image/playVideoById?id=' +
                  scope.row.video.split(',')[0]
                "
                  controls
                ></video>
              </el-carousel-item>
            </el-carousel>
            <el-tag v-else type="info">暂无数据</el-tag>
          </template>
          </el-table-column>
          <el-table-column
            prop="dictLabel"
            label="标签(病种)"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="isPublished"
            label="发布状态"
            width=""
            align="center"
          >
            <span slot-scope="scope">
              {{ String(scope.row.isPublished) == "1" ? "发布" : "未发布" }}
            </span>
          </el-table-column>
          <el-table-column
            prop="isHidden"
            label="公开状态"
            width=""
            align="center"
          >
            <span slot-scope="scope">
              {{ String(scope.row.isHidden) == "1" ? "私密" : "公开" }}
            </span>
          </el-table-column>
          <el-table-column
            prop="isDraftSaved"
            label="是否保存草稿"
            width=""
            align="center"
          >
            <span slot-scope="scope">
              {{ String(scope.row.isDraftSaved) == "1" ? "保存" : "未保存" }}
            </span>
          </el-table-column>
          <el-table-column
            prop="approvalStatus"
            label="审核状态"
            width="100px"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag effect="plain" v-if="scope.row.approvalStatus == 0"
                >待审批</el-tag
              >
              <el-tag
                effect="plain"
                class="pass_button"
                type="success"
                v-if="scope.row.approvalStatus == 1"
                >审批通过</el-tag
              >
              <el-tag
                effect="plain"
                type="danger"
                v-if="scope.row.approvalStatus == 2"
                >审批不通过</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="publishTime"
            label="发布时间"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="修改时间"
            width="160"
            align="center"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="170"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                :style="{ color: '#ff0000' }"
                size="medium   "
                type="text"
                icon="el-icon-delete"
                @click="DelArticle(scope.row.id)"
                >删除</el-button
              >
              <el-button
                :style="{ color: '#2cd3b5' }"
                size="medium  "
                type="text"
                icon="el-icon-search"
                @click="openDateilWindow(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 分页 -->
      <el-pagination
        class="pageAll"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        style="text-align: center"
      >
      </el-pagination>
   
        <!-- 添加或修改区域配置对话框 -->
    <el-dialog title="查看文章详情" :visible.sync="delailHouse" width="50%">
      <el-descriptions :model="ArticleFrom" ref="ArticleFrom" label-width="80px" class="demo-ArticleFrom" :column="1" size="medium" border>
        <el-descriptions-item label="医师名称">
          {{ ArticleFrom.userName }}
        </el-descriptions-item>
        <el-descriptions-item label="文章标题">
          {{ ArticleFrom.articleTitle }}
        </el-descriptions-item>
    
        <el-descriptions-item label="文章内容">
          <div v-html="ArticleFrom.articleContent"></div>
        </el-descriptions-item>
        <el-descriptions-item label="发布状态">
          {{ ArticleFrom.isPublished == 1 ? "发布" : "未发布" }}
        </el-descriptions-item>
        <el-descriptions-item label="标签病种">
          {{ ArticleFrom.dictLabel}}
        </el-descriptions-item>
        <el-descriptions-item label="公开状态">
          {{ ArticleFrom.isHidden == 1 ? "私密" : "公开" }}
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
            <el-tag effect="plain" v-if="ArticleFrom.approvalStatus==0">待审批</el-tag>
            <el-tag class="pass_button" effect="plain" v-if="ArticleFrom.approvalStatus==1">审批通过</el-tag>
            <el-tag type="danger" effect="plain" v-if="ArticleFrom.approvalStatus==2">审批不通过</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="发布时间">
          {{ ArticleFrom.publishTime }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ ArticleFrom.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="修改时间">
          {{ ArticleFrom.updateTime }}
        </el-descriptions-item>
      </el-descriptions>
       <div slot="footer" >
          <el-button @click="delailHouse= false">关 闭</el-button>
        </div>
    </el-dialog>
    <el-dialog :visible.sync="isUploading">
      
      <!-- <el-loading text="上传中..." background="#000" spinner="el-icon-loading">
    <div style="height: 200px;"></div>
  </el-loading> -->
</el-dialog>
    <el-dialog  top="4vh" :visible.sync="addViews" width="60%">
      
      <el-form
        :model="articleForm"
        ref="articleForm"
        :inline="true"
      >
        <el-form-item label="文章封面" >
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload1"
          >
            <img
              height="200"
              width="200"
              v-if="videoUrl"
              :src="videoUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="文章视频" >
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
          >
            <video
              height="200"
              width="200"
              v-if="imageUrl"
              :src="imageUrl"
              controls
            ></video>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="文章标题" prop="articleTitle">
          <el-input
            v-model="articleForm.articleTitle"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="病种标签">
        <el-select  v-model="articleForm.labelId" placeholder="请选择病种标签" style="width:200px">
                <el-option v-for="item in selectData" :key="item.dictLabel" :label="item.dictLabel" :value="item.dataId">
                        </el-option>
              </el-select>
          </el-form-item>
        <el-form-item  prop="articleContent">
          <div class="lrxtgg">
      <quill-editor
          style="width:200%"
            class="ql-editor"
            v-model="articleForm.articleContent"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          >
          </quill-editor>
    </div>
        </el-form-item>
            <el-form-item>
        </el-form-item>   
        <el-form-item label="是否公开" prop="isHidden">
          <el-radio-group v-model="articleForm.isHidden">
            <el-radio :label="2">公开</el-radio>
            <el-radio :label="1">私有</el-radio>
          </el-radio-group>
        </el-form-item>
        
         

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addViews = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </span>
    </el-dialog>
      <!-- ==================================================================================================================================================== -->
    </div>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' //调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor,
  },
  name: "sysArticle",
  template: "#sysArticle",
  data() {
    return {
      isUploading: false, // 添加此变量以跟踪上传状态
      description:'',
      editorOption: {
        // 编辑器配置
        placeholder: '请在这里输入文章内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], //引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], //列表
            [{ script: 'sub' }, { script: 'super' }], // 上下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], //字体
            [{ align: [] }], //对齐方式
            ['clean'], //清除字体样式
          ],
        },
      },
      imagess:"",
      Fileimage:"",
      file: "", // 头像
      updateForm: {
        doctorAge: "", //年龄
        userName: "",
        userBirthday: "",
        title: "",
        address: "",
        job: "",
        hospital: "",
        department: "",
        physicianNumber: "",
        life: "",
        personalPhotos: null,
        certificatePhoto: null,
        identityNumber: null,
        userPhone: null,
        userSex: "",
      },
      articleForm: {
					userId: '',
					imageID: '',
					articleTitle: '',
					labelId: '',
					articleContent: '',
					video: '',
					isHidden: 0,
				},
      //========================================================================================================================================
      addViews: false, //添加弹窗
      articleTitle: "", //名称属性
      articleData: [], //全查页面
      selectData: [], //全查页面
      loading: true, //loading加载
      delailHouse: false,
      //模糊查实体对象
      queryArticle: {
        articleTitle: "",
      },

      //分页
      pages: {
        total: 0, //数据总条数
        pageNum: 1, //当前页
        pageSize: 5, //每页几条数据
      },
      imageUrl: "", //上传图片路径
      videoUrl: "",
      //表单对象
      ArticleFrom: {
        id: 0,
        articleTitle: "",
        articleContent: "",
        video: "",
        publishTime: "",
        Tags: "",
        createTime: "",
        updateTime: "",
        userId: "",
        userName: "",
        images: 0,
        isPublished: "",
        isHidden: "",
        approvalStatus: "",
        dictLabel: "",
      },
    };
  },
  mounted() {
    this.getArticle(); // 初始化
  },
  methods: {
    openFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: '正在努力上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      },
      closeFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: '正在努力上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 1);
      },
    /**=====================富文本编辑器======================*/
    // 准备编辑器
    onEditorReady(editor) {},
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    // 内容改变事件
    onEditorChange() {},
    // 转码
    escapeStringHTML(content) {
      content = content.replace(/&lt;/g, '<')
      content = content.replace(/&gt;/g, '>')
      return content
    },
    beforeAvatarUpload1(file) {
      
      if(!this.imagess){
        if(this.imagess!=","){
        this.openFullScreen2()
      // 上传log图片格式
      const isJPG = file.type === "image/jpg";
      const isJPEG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG && !isJPEG) {
        this.$message.error("上传图片只能是JPG/PNG格式!");
        this.closeFullScreen2()
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        this.closeFullScreen2()
        return false;
      }
      // 赋值
      this.Fileimage = file;
      this.videoUrl = URL.createObjectURL(file);
      var formdatas = new FormData();
      formdatas.set('file',this.Fileimage,this.Fileimage.filename)
      this.$axios
              .post(
                'publishArticle/publishArticle1',
                formdatas
              )
              .then((res) => {
                this.closeFullScreen2()
                this.myMessage("success", "图片上传成功");
              if (res.data.flag) {
               if(this.imagess){
                this.imagess=this.imagess+","+res.data.data.toString()
               }else{
                this.imagess=res.data.data.toString()+","
               }
            
              } else {
            
              }
            })
      // isJPG && isLt2M 自动提交 false 是点击确定后提交
      return false;
          }else{
            this.myMessage("warning", "图片添加失败");
          }
          }else{
            this.myMessage("warning", "图片或视频只能添加一个");
          }
    },
    selectDict(){
      this.$axios
      .get("/dictData/selectOne", {
        })
        .then((res) => {
          if (res.data.flag) {
            this.selectData=res.data.data
          }
        })
    },
    openAddWindow(){
      this.articleForm={};
      this.imagess = "";
      this.imageUrl = "";
      this.videoUrl = "";
      this.selectDict();
      this.addViews=true;
    },
    openDateilWindow(row) {
      //打开查看弹窗
      this.ArticleFrom = JSON.parse(JSON.stringify(row));
      this.delailHouse = true;
    },
    beforeAvatarUpload(file) {
      if(!this.imagess){
        this.openFullScreen2()
      // 上传log图片格式
      // const isJPG = file.type === "image/jpeg";
      // const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 100;
      // if (!isJPG && !isPNG) {
      //   this.$message.error("上传logo图片只能是JPG/PNG格式!");
      //   return false;
      // }
      if (!isLt2M) {
        this.$message.error("上传视频大小不能超过 100MB!");
        return false;
      }
      // 赋值
      this.file = file;
      this.imageUrl = URL.createObjectURL(file);
      var formdata = new FormData();
      formdata.set('file',this.file,this.file.filename)
      this.$axios
              .post(
                'publishArticle/publishArticle1',
                formdata    
              )
              .then((res) => {
                this.closeFullScreen2()
                this.myMessage("success", "视频上传成功");
              if (res.data.flag) {
               debugger
               if(this.imagess){
                this.imagess=this.imagess+res.data.data.toString()+","
               }else{
                this.imagess=res.data.data.toString()+","
               }
              } else {
               
              }
            })
      // isJPG && isLt2M 自动提交 false 是点击确定后提交
      return false;
          }else{
            this.myMessage("warning", "图片或视频只能添加一个");
          }
    },
    // 分页
    handleSizeChange(val) {
      this.pages.pageSize = val;
      this.getArticle();
    },
    handleCurrentChange(val) {
      this.pages.pageNum = val;
      this.getArticle();
    },
    getArticle() {
      // 获取所有文章信息(全查)
      this.$axios
        .get("/Sys/SysArticle", {
          params: {
            articleTitle: this.queryArticle.articleTitle, //文章名称
            pageNum: this.pages.pageNum, //  当前页
            pageSize: this.pages.pageSize, //每页几条数据
          },
        })
        .then((res) => {
          if (res.data.flag) {
            this.articleData = res.data.data.content;
            this.pages.total = res.data.data.totalSize; //分页
          }
          this.loading = false;
        })
        .catch((err) => {
          this.myMessage("error", err);
        });
    },
    add(){
      if(this.imagess){
        if(this.articleForm.labelId){
      const formdata = new FormData();
      formdata.set('images',this.imagess)
      formdata.set('userId',55)
      formdata.set('labelId',this.articleForm.labelId)
      formdata.set('isHidden',this.articleForm.isHidden)
      formdata.set('articleContent',this.articleForm.articleContent)
      formdata.set('articleTitle',this.articleForm.articleTitle)
      this.$axios
              .post(
                '/publishArticle/insertPublishArticle1',
                formdata
              )
              .then((res) => {
              if (res.data) {
                this.getArticle()
                this.addViews=false;
              }
            })
          }else{
            this.myMessage("warning", "请添加文章标签");
          }
          }else{
            this.myMessage("warning", "请添加文章封面");
          }
    },
    // 下架文章
    DelArticle(id) {
      this.$confirm("是否删除这条数据", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete("/Sys/SysdelArticle?id=" + id)
            .then((res) => {
              if (res.data.flag) {
                this.myMessage("success", "删除成功");
                this.getArticle();
              } else {
                this.myMessage("warning", "删除失败！");
              }
            })
            .catch((res) => {
              this.myMessage("error", "删除失败,请联系管理员");
            });
        })
        .catch(() => {
          this.myMessage("info", "已取消下架");
        });
    },

    myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.lrxtgg {
  .quill-editor /deep/ .ql-container {
    min-height: 30px;
  }
}
/*审批通过按钮 */
.pass_button {
  background-color: #d4f8f1; /* 设置按钮的背景颜色 */
  color: #2cd3b5; /* 设置按钮里的字体颜色 */
  border-color: #d4f8f1; /* 设置按钮的边框颜色 */
}
.custom-button {
  background-color: #2cd3b5; /* 设置按钮的背景颜色 */
  color: #fff; /* 设置按钮里的字体颜色 */
  border-color: #2cd3b5; /* 设置按钮的边框颜色 */
}
.custom-buttonT {
  background-color: #ffff; /* 设置按钮的背景颜色 */
  color: #2cd3b5; /* 设置按钮里的字体颜色 */
  border-color: #2cd3b5; /* 设置按钮的边框颜色 */
}
/*分页*/
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #2cd3b5;
  color: #fff;
}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #2cd3b5;
  color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #2cd3b5;
}
</style>